<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-05-11 11:00:39
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-21 15:25:52
 * @Description:
 *
-->

<template>
  <div class="analysis-center-container">
    <div class="top">
      <div class="title">设计思路</div>
      <div class="flowChart"></div>
    </div>
    <div class="bottomLeft">
      <div class="title">知识库</div>
      <div
        v-for="(info, index) in infoList"
        :key="index"
        :class="random(index)"
      >
        <div class="infoCardTop">{{ info.title }} &ensp;</div>
        <div class="cardLink" @click="showDetail(info)">详情 <i class="el-icon-arrow-right"></i></div>
        <div class="infoCardBottom">
          <div style="display: inline-block; width: 100%">
            <!-- <span class="infoCardBottomName">微服务 &emsp;</span> -->
            <span class="infoCardBottomValue">{{ info.phenomenon }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottomRight">
      <div class="title">工作处理流</div>
      <div v-for="(flow, index) in flowList" :key="index" class="flowCard">
        <div class="cardDel" @click="delFlow(flow.id)">清除</div>
        <div class="flowTop">
          <img
            v-if="flow.alarmInfo.alarmLevel==='提示'"
            src="../../../assets/imgs/self-intelligence-ops/infoLeve1.png"
            class="flowImg"
          />
          <img
            v-if="flow.alarmInfo.alarmLevel==='次要'"
            src="../../../assets/imgs/self-intelligence-ops/infoLeve2.png"
            class="flowImg"
          />
          <img
            v-if="flow.alarmInfo.alarmLevel==='重要'"
            src="../../../assets/imgs/self-intelligence-ops/infoLeve3.png"
            class="flowImg"
          />
          <img
            v-if="flow.alarmInfo.alarmLevel==='紧急'"
            src="../../../assets/imgs/self-intelligence-ops/infoLeve4.png"
            class="flowImg"
          />
          <div class="flowTopContent">
            <div class="flowTopTitle">{{ flow.alarmInfo.ruleName }}</div>
            <div style="margin-top: 10px">
              <div class="flowTopContentInfo">
                <span class="infoName">来源&emsp;</span>
                <span class="infoValue">{{ flow.alarmInfo.resourceName }}</span>
              </div>
              <div class="flowTopContentInfo">
                <span class="infoName">时间&emsp;</span>
                <span class="infoValue">{{ flow.createTime }}</span>
              </div>
            </div>
            <div style="margin-top: 10px">
              <div class="flowTopContentInfo">
                <span class="infoName">根因分析&emsp;</span>
                <span class="infoValue" style="color: #f66173">{{ flow.knowledgeInfo.title }}</span>
              </div>
              <div class="flowTopContentInfo">
                <span class="infoName">当前状态&emsp;</span>
                <div
                  class="infoButton"
                  style="background: #ffe7ea; color: #f66173"
                >
                  {{ flow.status }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flowBottom">
          <div class="bottomTitle">修复建议</div>
          <div class="suggesList">
            <div v-for="(suggest, i) in flow.knowledgeInfo.suggestion" :key="i">
              <div class="suggestIcon">•</div>
              <div class="suggestInfo">
                <span style="font-weight: 600; color: #0287ff">{{ suggest.title }} &emsp;</span>{{ suggest.info }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="知识库详情"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div style="font-size: 14px;">
        <div style="line-height: 20px;margin-bottom:30px">
          <div style="font-weight: 400;color: #696969;display:inline-block;width:20%;vertical-align: top;">故障原因&emsp; </div>
          <div style="font-weight: 600;color: #4A4A4A;display:inline-block;width:80%;vertical-align: top;">{{ infoDetail.title }}</div>
        </div>
        <div style="line-height: 20px;margin-bottom:30px">
          <div style="font-weight: 400;color: #696969;display:inline-block;width:20%;vertical-align: top;">故障现象&emsp; </div>
          <div style="font-weight: 600;color: #4A4A4A;display:inline-block;width:80%;vertical-align: top;">{{ infoDetail.phenomenon }}</div>
        </div>
        <div style="line-height: 20px;margin-bottom:30px">
          <div style="font-weight: 400;color: #696969;display:inline-block;width:20%;vertical-align: top;">根本原因&emsp; </div>
          <div style="font-weight: 600;color: #4A4A4A;display:inline-block;width:80%;vertical-align: top;"><div v-for="(item, i) in infoDetail.reason" :key="i">{{ i+1 }}.{{ item }}</div></div>
        </div>
        <div style="line-height: 20px;margin-bottom:30px">
          <div style="font-weight: 400;color: #696969;display:inline-block;width:20%;vertical-align: top;">修复建议&emsp; </div>
          <div style="font-weight: 600;color: #4A4A4A;display:inline-block;width:80%;vertical-align: top;"><div v-for="(item, i) in infoDetail.suggestion" :key="i">{{ i+1 }}.{{ item }}</div></div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getKnowledge, getCauseList, deleteCause } from '@/api/cnap/self-intelligence-ops'
export default {
  name: 'AnalysisCenter',
  components: {},
  data() {
    return {
      dialogVisible: false,
      infoDetail: {},
      infoList: [],
      flowList: []
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.initData()// 集群数据
  },
  methods: {
    /**
     * @description: 通知消息样式
     * @description: 3种样式轮转
     * @return {*}
     */
    random(val) {
      let style = 'infoCard1'
      const num = val % 3
      if (num === 0) {
        style = 'infoCard1'
      }
      if (num === 1) {
        style = 'infoCard2'
      }
      if (num === 2) {
        style = 'infoCard3'
      }
      return style
    },
    /**
     * @description: 初始化数据
     * @description: 知识库、工作处理流程数据
     * @return {*}
     */
    initData() {
      const params = {
        pageNum: 1,
        pageSize: 20
      }
      getCauseList(params).then(res => {
        // code==200是正常返回
        if (res.code === 200) {
          // 返回结果取值
          // 信息在res.data中
          this.flowList = res.data.result
          this.flowList.forEach(element => {
            const suggestList = []
            const arr = element.knowledgeInfo.suggestion.split('。')
            arr.pop()
            if (arr.length > 0) {
              arr.forEach(element => {
                const list = element.split('：')
                suggestList.push({
                  title: list[0],
                  info: list[1]
                })
              })
            }
            console.log(suggestList)
            element.knowledgeInfo.suggestion = suggestList
          })
        } else {
          // 数据查询失败
          // 输出报错信息
          this.$message.error(res.message)
        }
      })
      getKnowledge().then(res => {
        // code==200是正常返回
        if (res.code === 200) {
          // 返回结果取值
          // 信息在res.data中
          this.infoList = res.data
        } else {
          // 数据查询失败
          // 输出报错信息
          this.$message.error(res.message)
        }
      })
    },
    showDetail(info) {
      this.dialogVisible = true
      info.reason = info.reason.split('。')
      info.reason.pop()
      info.suggestion = info.suggestion.split('。')
      info.suggestion.pop()
      this.infoDetail = info
      // console.log((info.reason.split('。')))
    },
    delFlow(id) {
      deleteCause(id).then(res => {
        // code==200是正常返回
        if (res.code === 200) {
          // 返回结果取值
          // 信息在res.data中
          this.$message.success('删除成功')
          this.initData()
        } else {
          // 数据查询失败
          // 输出报错信息
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.analysis-center-container {
  padding: 20px;
  .top {
    background: rgba(254, 254, 255, 1);
    height: 368px;
    padding: 20px;
  }
  .flowChart {
    width: 100%;
    height: 248px;
    background: url("../../../assets/imgs/self-intelligence-ops/flow.png")
      no-repeat;
    background-size: 100% 100%;
  }
  .title {
    font-size: 16px;
    font-weight: 600;
    color: #4a4a4a;
    margin-bottom: 20px;
  }
  .bottomLeft {
    vertical-align: top;
    margin-top: 20px;
    display: inline-block;
    width: 49%;
    background: rgba(254, 254, 255, 1);
    height: 560px;
    padding: 20px;
    overflow-y: auto;
  }
  .infoCard1 {
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
    height: 80px;
    background: #fdfdfd;
    border: 1px solid #ececec;
    border-left: 5px solid rgba(0, 145, 255, 1);
    margin-bottom: 20px;
  }
  .infoCard2 {
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
    height: 80px;
    background: #fdfdfd;
    border: 1px solid #ececec;
    border-left: 5px solid rgba(50, 197, 255, 1);
    margin-bottom: 20px;
  }
  .infoCard3 {
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
    height: 80px;
    background: #fdfdfd;
    border: 1px solid #ececec;
    border-left: 5px solid rgba(0, 232, 211, 1);
    margin-bottom: 20px;
  }
  .infoCardTop {
    margin-top: 5px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #4a4a4a;
    line-height: 40px;
    width: 96%;
    margin-left: 2%;
  }
  .cardLink {
    position: absolute;
    display: inline-block;
    right: 20px;
    top: 15px;
    font-size: 14px;
    font-weight: 600;
    color: #027dec;
    cursor: pointer;
  }
  .infoCardBottom {
    width: 96%;
    margin-left: 2%;
    .infoCardBottomName {
      font-size: 14px;
      font-weight: 400;
      color: #696969;
    }
    .infoCardBottomValue {
      font-size: 14px;
      font-weight: 600;
      color: #4a4a4a;
    }
  }
  .bottomRight {
    vertical-align: top;
    margin-top: 20px;
    display: inline-block;
    width: 49%;
    background: rgba(254, 254, 255, 1);
    height: 560px;
    padding: 20px;
    margin-left: 2%;
    overflow-y: auto;
  }
  .flowCard {
    position: relative;
    width: 100%;
    background: #fdfdfd;
    border: 1px solid #ececec;
    margin-bottom: 20px;
    .cardDel {
      position: absolute;
      font-size: 14px;
      font-weight: 400;
      color: #027dec;
      right: 10px;
      top: 10px;
      cursor: pointer;
    }
  }
  .flowTop {
    padding: 10px;
    height: 125px;
    width: 96%;
    margin-left: 2%;
    border-bottom: 1px solid #ececec;
    .flowImg {
      width: 13%;
      height: 90px;
      margin-top: 10px;
      margin-right: 20px;
    }
    .flowTopTitle {
      font-size: 16px;
      font-weight: 600;
      color: #0287ff;
    }
    .flowTopContent {
      display: inline-block;
      vertical-align: top;
      margin-top: 10px;
      width: 80%;
    }
    .flowTopContentInfo {
      display: inline-block;
      vertical-align: top;
      width: 50%;
    }
    .infoValue {
      font-size: 14px;
      font-weight: 500;
      color: #4a4a4a;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .infoName {
      font-size: 14px;
      font-weight: 400;
      color: #c3c3c3;
    }
    .infoButton {
      display: inline-block;
      padding: 2px 5px 2px 5px;
      height: 22px;
      font-weight: 500;
      font-size: 12px;
      border-radius: 3px;
    }
  }
  .flowBottom {
    padding: 10px;
    width: 96%;
    margin-left: 2%;
    .bottomTitle {
      font-size: 16px;
      font-weight: 600;
      color: #4a4a4a;
      margin-bottom: 10px;
    }
    .suggesList {
      line-height: 20px;
    }
    .suggestIcon {
      width: 3%;
      position: relative;
      bottom: 2px;
      font-size: 18px;
      font-weight: 600;
      color: #0287ff;
      display: inline-block;
      vertical-align: top;
    }
    .suggestInfo {
      width: 97%;
      font-size: 14px;
      display: inline-block;
      vertical-align: top;
      margin-bottom: 10px;
      font-weight: 400;
      color: #696969;
    }
  }
}
</style>
